<template>
	<div class="view">
		<p class="tip">您的评价是病友们求医路上的指路明灯！</p>
		<div class="title">医生印象</div>
		<div class="tagList">
			<p v-for="(item, index) in tagList" :key="index" @click="select(index)" :class="item.isSelect ? 'select' : ''">{{ item.tagName }}</p>
		</div>
		<div class="title">疾病投票</div>
		<div class="list">
			<div class="options" v-for="(item, index) in diseaseList" :key="index" @click="active = index" :class="active == index ? 'is-select' : 'no-select'">
				{{ item.diseaseName }}
			</div>
		</div>

		<div class="writeInfo">
			<textarea v-model="additionalRemark" placeholder="补充评价"></textarea>
			<image class="selectImg" @click="chooseImg()" src="/static/images/upload_case.png" alt="" v-if="tempFilePaths.length < 5" />
			<div class="preview" v-if="tempFilePaths.length > 0">
				<div class="item" v-for="(item, index) in tempFilePaths" :key="index">
					<image @click="preview(item)" :src="item" />
					<image class="delete" @click="del(index)" src="/static/images/detele.png" alt="" />
				</div>
			</div>
			<button type="primary" style="background-color: #32C59A;" @click="send()">提交</button>
		</div>
	</div>
</template>

<script>
import { getdoctorTagList, comments, policy } from '../../../apis/request.js';
export default {
	data() {
		return {
			active: -1,
			selectIndex: 0,
			tagList: [],
			diseaseList: [],
			doctorId: '',
			isUpload: '0',
			userId: '1',
			additionalRemark: '', //补充备注
			commentImage: '', //图片信息
			tempFilePaths: [], //临时图片数组
			index: 0, //记录上传图片下标
			imgList: [], //最终上传完成的图片数组
			formParam: {},
			params: {}
		};
	},
	methods: {
		async getpolicy() {
			this.params = await policy();
		},
		diseaseClick(index) {
			this.active = index;
		},
		// 获取疾病列表
		async getDiseaseList() {
			this.$api.http(
				'/hospital/medicalDoctorDisease/api/n/getListByDoctorId',
				'GET',
				{
					doctorId: this.doctorId
				},
				res => {
					this.diseaseList = res.data.result;
				}
			);
		},
		del(index) {
			this.$dialog('提示', '是否确认删除').then(res => {
				this.tempFilePaths.splice(index, 1);
				this.imgList.splice(index, 1);
				this.index--;
			});
		},
		chooseImg() {
			//  选择图片
			wx.chooseImage({
				count: 5,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					// tempFilePath可以作为img标签的src属性显示图片
					// const tempFilePaths = res.tempFilePaths;
					this.tempFilePaths.push(...res.tempFilePaths);
					//选择完毕上传图片
					this.uploadImg(this.tempFilePaths);
					wx.showLoading({
						title: '上传图片中...',
						mask: true
					});
				}
			});
		},
		uploadImg(file) {
			let { host, dir, accessKeyId, policy, signature } = this.params;
			const aliyunFileKey = dir + '/' + Math.floor(Math.random() * 150) + '.png';
			const formParam = {
				key: aliyunFileKey,
				policy: policy,
				OSSAccessKeyId: accessKeyId,
				signature: signature,
				success_action_status: '200'
			};
			uni.uploadFile({
				url: host, //仅为示例，非真实的接口地址
				filePath: file[this.index],
				name: 'file',
				formData: formParam,
				success: res => {
					if (res.statusCode != 200) {
						this.$Toast(`上传出错${JSON.stringify(res)}`);
						return;
					}
					let data = host + '/' + aliyunFileKey;
					this.imgList.push(data);
					this.index++;
					if (this.index < file.length) {
						//  小于说明还未上传完成
						this.uploadImg(file);
					} else {
						//上传完成
						uni.hideLoading();
						uni.showToast({
							title: '图片上传完成',
							icon: 'none',
							duration: 2000
						});
					}
				},
				fail: err => {
					// 图片上传失败
					wx.hideLoading();
					this.$dialog('提示', `第${this.index + 1}张图片上传失败，是否重新上传`)
						.then(res => {
							//用户点击确定，重新上传该图
							this.uploadImg(file);
						})
						.catch(err => {
							this.tempFilePaths.splice(this.index, 1);
							if (this.index < this.tempFilePaths.length) {
								wx.showLoading({
									title: '继续上传...',
									mask: true,
									success: res => {
										this.index++;
										this.uploadImg(file);
									}
								});
							} else {
								this.index = 0;
								wx.showToast({
									title: '图片上传完成',
									icon: 'none',
									duration: 2000
								});
							}
						});
				}
			});
		},
		preview(img) {
			this.$Imgpreview(img, this.tempFilePaths);
		},
		send() {
			let tag = [];
			tag.push(
				...this.tagList.filter(item => {
					return item.isSelect;
				})
			);
			if (tag.length == 0) {
				this.$dialog('提示', '请选择医生印象');
				return;
			}
			if (this.active == -1) {
				this.$dialog('提示', '请选择对应疾病');
				return;
			}
			const params = {
				additionalRemark: this.additionalRemark,
				commentImage: this.imgList.toString(),
				commentTagsList: tag,
				doctorId: this.doctorId,
				diseaseId: this.diseaseList[this.active].diseaseId,
				userId: uni.getStorageSync('userInfo').id
			};
			comments(params).then(res => {
				this.$dialog('提示', res.message).then(() => {
					if (res.code == 200) {
						uni.$emit('commentRefresh');
						wx.navigateBack({
							delta: 1
						});
					}
				});
			});
		},
		getimgList(e) {
			if (e.length > 0) {
				this.commentImage = e;
			}
		},
		select(index) {
			this.tagList[index].isSelect = !this.tagList[index].isSelect;
		},
		async getlist() {
			const list = await getdoctorTagList({
				doctorId: this.doctorId
			});
			this.tagList.push(
				...list.map(item => {
					return {
						...item,
						isSelect: false
					};
				})
			);
		}
	},
	onLoad(options) {
		this.doctorId = options.id;
		this.getlist();
		this.getpolicy();
		this.getDiseaseList();
	}
};
</script>

<style lang="scss" scoped>
.view {
	.tip {
		height: 72rpx;
		background: #faefdb;
		padding-left: 34rpx;
		font-size: 26rpx;
		line-height: 72rpx;
		color: #ffa500;
	}

	.title {
		padding: 30rpx 30rpx 0;
		color: #020202;
		font-size: 28rpx;
		background-color: #fff;
	}

	.tagList {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		background-color: #ffffff;

		p {
			height: 58rpx;
			padding: 0rpx 15rpx;
			background: #f1efef;
			border-radius: 29rpx;
			font-size: 24rpx;
			color: #333333;
			line-height: 58rpx;
			margin: 20rpx 15rpx 0rpx 0rpx;
		}

		.select {
			background: #32C59A;
			color: #ffffff;
		}
	}

	.list {
		margin-bottom: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;

		.options {
			margin: 20rpx 15rpx 0rpx 0rpx;
			padding: 15rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
		}

		.is-select {
			color: #fff;
			background-color: #32C59A;
		}

		.no-select {
			color: #333;
			background-color: #f1efef;
		}
	}

	.writeInfo {
		background-color: #ffffff;
		padding: 30rpx;

		textarea {
			padding: 15rpx 20rpx;
			font-size: 28rpx;
			border: 1rpx solid #dcdcdc;
			height: 200rpx;
			margin-bottom: 30rpx;
			width: calc(100% - 44rpx);
		}

		image {
			width: 227rpx;
			height: 222rpx;
		}

		.delete {
			width: 60rpx;
			height: 60rpx;
			position: relative;
			top: -182rpx;
			left: -30rpx;
		}

		button {
			margin-top: 30rpx;
			color: #ffffff;
			text-align: center;
			font-size: 30rpx;
		}
	}

	.selectImg {
		width: 227rpx;
		height: 227rpx;
	}

	.preview {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.item {
			margin: 10rpx 20rpx 0rpx 0rpx;
			position: relative;

			img:nth-child(1) {
				width: 100rpx;
				height: 100rpx;
				border-radius: 10rpx;
			}

			img:nth-child(2) {
				position: absolute;
				top: -11px;
				right: -14px;
				width: 55rpx;
				height: 53rpx;
			}
		}
	}
}
</style>
